<template>
	<view class="content">
		<view class="form-wrap">
			<view class="form-title">个性签名</view>
			<view class="textarea-item">
				<textarea class="textarea" @input="inputThink" @blur="outblur" placeholder="请输入您的个性签名" :maxlength="140" :value="form.think" />
				<view class="length-wrap">
					<text>{{think_length}}/140</text>
				</view>
			</view>
		</view>
		<view class="form-wrap">
			<view class="form-title">基本信息</view>
			<view class="form-item">
				<view class="label">昵称</view>
				<view class="value">
					<input v-model="form.name" @input="inputName"  @blur="outblur" type="text" placeholder="请输入您的昵称">
				</view>
			</view>
			<view class="form-item">
				<view class="label">微信</view>
				<view class="value">
					<input v-model="form.wechat" type="text" placeholder="请输入您的微信">
				</view>
			</view>
			<view class="form-item">
				<view class="label">年龄</view>
				<view class="value">
					<picker @change="ageSelector" :value="ageIndex" :range="ageList">
						<view>{{ageList[ageIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">学历</view>
				<view class="value">
					<picker @change="eduSelector" :value="eduIndex" :range="eduList">
						<view>{{eduList[eduIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">婚姻情况</view>
				<view class="value">
					<picker @change="marriageSelector" :value="marriageIndex" :range="marriageList">
						<view>{{marriageList[marriageIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">身高</view>
				<view class="value">
					<input v-model="form.height" type="number" placeholder="请填写您的身高">
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">月收入</view>
				<view class="value">
					<picker @change="incomeSelector" :value="incomeIndex" :range="incomeList">
						<view>{{incomeList[incomeIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">职业</view>
				<view class="value">
					<input v-model="form.occupation" type="text" placeholder="请输入您的职业">
				</view>
			</view>
		</view>
		<view class="form-wrap">
			<view class="form-title">详细资料</view>
			<view class="form-item">
				<view class="label">住房情况</view>
				<view class="value">
					<picker @change="houseSelector" :value="houseIndex" :range="houseList">
						<view>{{houseList[houseIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">魅力部位</view>
				<view class="value">
					<picker @change="charmSelector" :value="charmIndex" :range="charmList">
						<view>{{charmList[charmIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">血型</view>
				<view class="value">
					<picker @change="bloodSelector" :value="bloodIndex" :range="bloodList">
						<view>{{bloodList[bloodIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">婚后与父母同居</view>
				<view class="value">
					<picker @change="placeSelector" :value="placeIndex" :range="placeList">
						<view>{{placeList[placeIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">婚前同居</view>
				<view class="value">
					<picker @change="cohabitationSelector" :value="cohabitationIndex" :range="cohabitationList">
						<view>{{cohabitationList[cohabitationIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				form: {
					think: '',
					name: '',
					wechat: '',
					age: '',
					education: '',
					marriage: '',
					height: '',
					income: '',
					occupation: '',
					house: '',
					charm: '',
					blood: '',
					place: '',
					cohabitation: '',
				},
				think_length: 0,
				ageList: ['请选择年龄',18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60],
				ageIndex: 0,
				eduList: ['请选择学历', '初中及以下', '高中及中专', '大专', '本科', '硕士及以上'],
				eduIndex: 0,
				marriageList: ['请选择婚姻情况', '未婚', '离婚', '丧偶'],
				marriageIndex: 0,
				incomeList: ['请选择月收入', '2000以下', '2000-4000', '4000-6000', '6000-10000', '10000-20000', '20000以上'],
				incomeIndex: 0,
				houseList: ['请选择住房情况', '已购房屋', '与父母同住', '租房', '其他'],
				houseIndex: 0,
				charmList: ['请选择魅力部位', '手', '鼻梁', '腿', '耳朵', '眼睛', '嘴唇', '脸', '脚', '胸部', '腰部'],
				charmIndex: 0,
				bloodList: ['请选择血型', 'A型', 'B型', 'AB型', 'O型'],
				bloodIndex: 0,
				placeList: ['请选择', '愿意', '不愿意', '看情况'],
				placeIndex: 0,
				cohabitationList: ['请选择', '可以', '不可以', '看情况'],
				cohabitationIndex: 0,
				mgArr:[],
				isgxqm:false,
				isnc:false,
			}
		},
		onLoad(options) {
			this.userInfo = JSON.parse(options.userinfo)
			this.form.think = this.userInfo.think;
			this.think_length = this.userInfo.think.length;
			this.form.name = this.userInfo.name;
			this.form.wechat = this.userInfo.wechat;
			this.form.age = this.userInfo.age;
			for (let i = 0; i < this.ageList.length; i++) {
				if (this.form.age == this.ageList[i]) {
					this.ageIndex = i
				}
			}
			this.form.education = this.userInfo.education;
			this.eduIndex = this.userInfo.education;
			this.form.marriage = this.userInfo.marriage;
			this.marriageIndex = this.userInfo.marriage;
			this.form.height = this.userInfo.height;
			this.form.income = this.userInfo.income;
			this.incomeIndex = this.userInfo.income;
			this.form.occupation = this.userInfo.occupation;
			this.form.house = this.userInfo.house;
			this.houseIndex = this.userInfo.house;
			this.form.charm = this.userInfo.charm;
			this.charmIndex = this.userInfo.charm;
			this.form.blood = this.userInfo.blood;
			this.bloodIndex = this.userInfo.blood;
			this.form.place = this.userInfo.place;
			this.placeIndex = this.userInfo.place;
			this.form.cohabitation = this.userInfo.cohabitation;
			this.cohabitationIndex = this.userInfo.cohabitation;
			
			
			this.mgArr = uni.getStorageSync('sensitive');
		},
		onReady() {
			
		},
		onNavigationBarButtonTap(e) {
			if (this.form.think == '') {
				uni.showToast({
					title: '请输入您的个性签名',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			if (this.form.name == '') {
				uni.showToast({
					title: '请输入您的昵称',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			if (this.form.wechat == '') {
				uni.showToast({
					title: '请输入您的微信',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			if (this.form.age == '') {
				uni.showToast({
					title: '请选择年龄',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			if (this.form.education == '') {
				uni.showToast({
					title: '请选择您的学历',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			if (this.form.marriage == '') {
				uni.showToast({
					title: '请选择您的婚姻情况',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			if (this.form.height == '') {
				uni.showToast({
					title: '请输入您的身高',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			if (this.form.income == '') {
				uni.showToast({
					title: '请选择您的月收入',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			if(this.isnc){
				uni.showToast({
					title: '昵称内含有违规内容，请规范你的内容',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			if(this.isgxqm){
				uni.showToast({
					title: '信息内含有违规内容，请规范你的内容',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			// if (this.form.occupation == '') {
			// 	uni.showToast({
			// 		title: '请输入您的职业',
			// 		position: 'bottom',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			// if (this.form.house == '') {
			// 	uni.showToast({
			// 		title: '请选择您的住房情况',
			// 		position: 'bottom',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			// if (this.form.charm == '') {
			// 	uni.showToast({
			// 		title: '请选择您的魅力部位',
			// 		position: 'bottom',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			// if (this.form.blood == '') {
			// 	uni.showToast({
			// 		title: '请选择您的血型',
			// 		position: 'bottom',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			// if (this.form.place == '') {
			// 	uni.showToast({
			// 		title: '请选择婚后是否与父母同住',
			// 		position: 'bottom',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			// if (this.form.cohabitation == '') {
			// 	uni.showToast({
			// 		title: '请选择婚前是否同居',
			// 		position: 'bottom',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			uni.showLoading({
				title: '',
			});
			this.form.method = 'V1.UserInfo';
			this.form.uid = this.userInfo.id;
			this.form.token = this.userInfo.token;
			this.$api.api.ajaxData(this.form, res => {
				uni.hideLoading();
				uni.showToast({
					title: res.msg,
					position: 'bottom',
					icon: 'none'
				});
				if (res.status) {
					this.$tim.updateMyProfile({
						nick: this.form.name,
					}).then(imResponse => {
						console.log('更新资料成功:', imResponse.data);
					}).catch(imError => {
						console.warn('更新资料失败:', imError);
					});
					uni.$emit('my-page', {
						type: 'update',
					})
					uni.navigateBack({
						delta: 1
					})
				}
			}, err => {
				uni.hideLoading();
				uni.showToast({
					title: '网络错误，请稍后再试',
					position: 'bottom',
					icon: 'none'
				});
			})
		},
		methods: {
			inputThink: function (e) {
				this.form.think = e.detail.value;
				this.think_length = this.form.think.length;
				
				this.isgxqm = this.filtion(this.mgArr,e.detail.value)
			},
			inputName:function (e) {
				this.isnc = this.filtion(this.mgArr,e.detail.value)
			},
			outblur(){
				this.isgxqm = this.filtion(this.mgArr,this.form.think)
				this.isnc = this.filtion(this.mgArr,this.form.name)
				
				if(this.isgxqm){
					uni.showToast({
						title: '个性签名信息内含有违规内容，请规范你的内容',
						position: 'bottom',
						icon: 'none'
					});
				}
				if(this.isnc){
					uni.showToast({
						title: '昵称内含有违规内容，请规范你的内容',
						position: 'bottom',
						icon: 'none'
					});
				}
			},
			// 敏感词匹配事件
			filtion(arr, value) {
			    let re = '';
				let isming=false;
			    for (let i = 0; i < arr.length; i++) {
			        if (i==arr.length-1) {
			            re+=arr[i];
			        }else{
			            re+=arr[i]+"|";
			        }
			       
			        //利用RegExp可以动态生成正则表示式
			        let r = new RegExp(arr[i], "ig");
			        if(r.test(value)){
						
						//这里是有敏感词的情况下，已经标红，并且提示为false
						isming=true;
						return isming;
			        }
			    }
			},
			
			ageSelector: function (e) {
				this.ageIndex = e.target.value
				if (this.ageIndex != 0) {
					this.form.age = this.ageList[this.ageIndex]
				}
			},
			eduSelector: function (e) {
				this.eduIndex = e.target.value
				if (this.eduIndex != 0) {
					this.form.education = this.eduIndex
				}
			},
			marriageSelector: function (e) {
				this.marriageIndex = e.target.value
				if (this.marriageIndex != 0) {
					this.form.marriage = this.marriageIndex
				}
			},
			incomeSelector: function (e) {
				this.incomeIndex = e.target.value
				if (this.incomeIndex != 0) {
					this.form.income = this.incomeIndex
				}
			},
			houseSelector: function (e) {
				this.houseIndex = e.target.value
				if (this.houseIndex != 0) {
					this.form.house = this.houseIndex
				}
			},
			charmSelector: function (e) {
				this.charmIndex = e.target.value
				if (this.charmIndex != 0) {
					this.form.charm = this.charmIndex
				}
			},
			bloodSelector: function (e) {
				this.bloodIndex = e.target.value
				if (this.bloodIndex != 0) {
					this.form.blood = this.bloodIndex
				}
			},
			placeSelector: function (e) {
				this.placeIndex = e.target.value
				if (this.placeIndex != 0) {
					this.form.place = this.placeIndex
				}
			},
			cohabitationSelector: function (e) {
				this.cohabitationIndex = e.target.value
				if (this.cohabitationIndex != 0) {
					this.form.cohabitation = this.cohabitationIndex
				}
			},
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.form-wrap {
		padding: 0 20rpx;
		background: #fff;
		margin-bottom: 10rpx;
		.form-title {
			font-size: 30rpx;
			color: $title-color;
			padding: 20rpx 30rpx;
			position: relative;
			&::before {
				content: '';
				display: block;
				width: 10rpx;
				height: 30rpx;
				background-color: $main-color;
				border-radius: 10rpx;
				position: absolute;
				left: -10rpx;
				top: 50%;
				margin-top: -15rpx;
			}
		}
		.textarea {
			width: 100%;
			padding: 10rpx;
			box-sizing: border-box;
		}
		.length-wrap {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			width: 100%;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
		}
		.form-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 10rpx 20rpx;
			border-top: 1rpx solid $border-light-color;
			.label {
				.title {
					color: $title-color;
					font-size: 30rpx;
				}
				.tips {
					color: $text-color;
					font-size: 24rpx;
				}
			}
			.value {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex: 1;
				height: 80rpx;
				color: $title-color;
				input {
					padding-right: 0;
					text-align: right;
				}
			}
			.uni-icon-arrowright {
				font-size: 24rpx;
				color: $text-color;
				margin-left: 10rpx;
			}
			.sex-picker {
				width: 100%;
				.uni-input {
					padding-right: 0;
					text-align: right;
				}
			}
		}
	}
</style>
